<template>
	<view class="order-create">
		<scroll-view scroll-y class="viewport">
			<!-- 收货地址 -->
			<navigator class="shipment" hover-class="none" url="/subpkg/address/address?from=order" v-if="addRess">
				<view class="user"> {{ addRess.receiver }}
					{{addRess.contact}}
				</view>
				<view class="address">
					{{addRess.fullLocation}} {{addRess.address}}
				</view>
				<text class="icon icon-right"></text>
			</navigator>
			<!-- 收货地址 - 无地址 -->
			<navigator class="shipment" hover-class="none" url="/subpkg/address/address?from=order" v-else>
				<view class="address"> 请选择收货地址 </view>
				<text class="icon icon-right"></text>
			</navigator>

			<!-- 商品信息 -->
			<view class="goods">
				<navigator v-for="item in payData.goods" :key="item.id" :url="`/pages/goods/index?id=${item.id}`"
					class="item" hover-class="none">
					<image class="cover" :src="item.picture"></image>
					<view class="meta">
						<view class="name ellipsis">
							{{ item.name }}
						</view>
						<view class="type">{{ item.attrsText }}</view>
						<view class="price">
							<view class="actual">
								<text class="symbol">¥</text>{{ item.payPrice }}
							</view>
							<view class="original">
								<text class="symbol">¥</text>{{ item.price }}
							</view>
						</view>
						<view class="quantity">x{{ item.count }}</view>
					</view>
				</navigator>
			</view>

			<!-- 配送及支付方式 -->
			<view class="related">
				<view class="item">
					<text class="text">配送时间</text>
					<text class="picker icon-fonts">{{ "时间不限(周一至周五)" }}</text>
				</view>
				<view class="item">
					<text class="text">支付方式</text>
					<text class="picker icon-fonts">{{ "在线支付" }}</text>
				</view>
				<view class="item">
					<text class="text">买家备注</text>
					<input v-model="buyerMessage" cursor-spacing="30" placeholder="建议留言前先与商家沟通确认" />
				</view>
			</view>

			<!-- 支付金额 -->
			<view class="settlement">
				<view class="item">
					<text class="text">商品总价: </text>
					<text class="number">
						<text class="symbol">¥</text>
						{{ summary.totalPrice || 0 }}
					</text>
				</view>
				<view class="item">
					<text class="text">运费: </text>
					<text class="number">
						<text class="symbol">¥</text>
						{{ summary.postFee || 0 }}
					</text>
				</view>

				<!-- 如果有折扣，渲染折扣金额，没有折扣就不渲染了，免得用户伤心 -->
				<view class="item">
					<text class="text">折扣: </text>
					<text class="number danger">
						<text class="symbol">-¥</text>
						{{ summary.discountPrice || 0 }}
					</text>
				</view>
			</view>
		</scroll-view>

		<!-- 底部工具 -->
		<view class="toolbar">
			<view class="amount">
				<text class="symbol">¥</text>
				<text class="number">{{ summary.totalPayPrice || 0 }}</text>
			</view>
			<view class="button" @click="toOrder">提交订单</view>
		</view>
	</view>
</template>
<script>
	import {
		getOrderPre,
		getAgainOrder,
		getGoods,
		postOrder
	} from '@/api/order.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				// 买家留言
				buyerMessage: "",
				payData: {},
				summary: {},
				addRessId: '',
				addRess: [],
				requestData: {
					goods: [],
					addressId: this.id,
					deliveryTimeType: 1,
					buyerMessage: this.buyerMessage,
					payType: 1,
					payChannel: 1
				},
				createList: [],
				orderId: '',
				goodsDetail: {
					skuId: '',
					count: '',
					addRessId: ''
				}
			}
		},
		computed: {
			...mapState('pay', ['id', 'addRessInfo'])
		},
		onLoad(options) {
			console.log('options', options);
			if (options.skuId) {
				this.goodsDetail = {
					...options
				}
				this.getFromGoods()
			} else if (options.id) {
				this.orderId = options.id
				this.getFromOrder()
			} else {
				this.getOrderPres()
			}
			// console.log('addRessInfo', this.addRessInfo);

		},
		onShow() {
			this.requestData.addressId = this.id
			this.addRess = this.addRessInfo.find(item => item.id === this.id)
			// console.log('id', this.addRess);
		},
		methods: {
			async getOrderPres() {
				const res = await getOrderPre()

				this.payData = res.result
				this.summary = res.result.summary
				this.createList = res.result.goods
				this.addRess = res.result.userAddresses[0]
				// this.requestData.goods = res.result.goods
				// console.log('orderPre', this.addRess);
			},
			async getFromOrder() {
				const res = await getAgainOrder(this.orderId)
				this.payData = res.result
				this.summary = res.result.summary
				this.createList = res.result.goods
				this.addRess = this.payData.userAddresses[0]
				// console.log('fromorder', this.addRess);
			},
			async getFromGoods() {
				// console.log('this.goodsDetail', this.goodsDetail);
				const res = await getGoods(this.goodsDetail)
				// console.log('res', res);
				this.payData = res.result
				this.summary = res.result.summary
				this.createList = res.result.goods
				this.addRess = this.addRessInfo[0]
				// console.log('goodsres', res);
			},
			async toOrder() {
				for (let i in this.createList) {
					this.requestData.goods.push({
						skuId: this.createList[i].skuId,
						count: this.createList[i].count
					})
				}
				const res = await postOrder(this.requestData)
				const id = res.result.id
				uni.navigateTo({
					url: `/subpkg/order_detail/order_detail?type=${id}`
				})
				// console.log('跳转详情页');
			}

		}
	};
</script>
<style lang="scss">
	.safe-area-bottom {
		background-color: #fff;
	}

	.order-create {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
		background-color: #f4f4f4;
		padding-bottom: 120rpx;
	}

	.viewport {
		padding-top: 20rpx;
	}

	.shipment {
		padding: 30rpx 30rpx 25rpx 84rpx;
		margin: 0 20rpx;
		font-size: 26rpx;
		border-radius: 10rpx;
		background: url(https://static.botue.com/erabbit/static/images/locate.png) 20rpx center / 50rpx no-repeat #fff;
		position: relative;
	}

	.shipment .icon {
		font-size: 36rpx;
		color: #333;
		transform: translateY(-50%);
		position: absolute;
		top: 50%;
		right: 20rpx;
	}

	.shipment .user {
		color: #333;
		margin-bottom: 5rpx;
	}

	.shipment .address {
		color: #666;
	}

	.link {
		margin: 20rpx;
		text-align: center;
		line-height: 72rpx;
		font-size: 26rpx;
		color: #fff;
		border-radius: 72rpx;
		background-color: #27ba9b;
	}

	.popup-root {
		.list {
			padding: 20rpx 0 40rpx 10rpx !important;
		}

		.list .item {
			padding: 30rpx 60rpx 30rpx 10rpx;
			position: relative;
		}

		.list .item .icon {
			color: #999;
			font-size: 40rpx;
			transform: translateY(-50%);
			position: absolute;
			top: 50%;
			right: 10rpx;
		}

		.list .item .icon-checked {
			color: #27ba9b;
		}

		.list .item .text {
			font-size: 28rpx;
			color: #444;
		}
	}

	.goods {
		margin: 20rpx 20rpx 0;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.goods .item {
		display: flex;
		padding: 30rpx 0;
		border-top: 1rpx solid #eee;
	}

	.goods .item:first-child {
		border-top: none;
	}

	.goods .item .cover {
		width: 170rpx;
		height: 170rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.goods .item .meta {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
	}

	.goods .item .name {
		height: 80rpx;
		font-size: 26rpx;
		color: #444;
	}

	.goods .item .type {
		line-height: 1.8;
		padding: 0 15rpx;
		margin-top: 6rpx;
		font-size: 24rpx;
		align-self: flex-start;
		border-radius: 4rpx;
		color: #888;
		background-color: #f7f7f8;
	}

	.goods .item .price {
		display: flex;
		align-items: baseline;
		margin-top: 6rpx;
		font-size: 28rpx;
	}

	.goods .item .symbol {
		font-size: 20rpx;
	}

	.goods .item .original {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
	}

	.goods .item .actual {
		margin-right: 10rpx;
		color: #cf4444;
	}

	.goods .item .quantity {
		position: absolute;
		bottom: 0;
		right: 0;
		font-size: 26rpx;
		color: #444;
	}

	.related {
		padding: 0 20rpx;
		margin: 20rpx 20rpx 0;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.related .item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 80rpx;
		font-size: 26rpx;
		color: #333;
	}

	.related input {
		flex: 1;
		text-align: right;
		margin: 20rpx 0;
		padding-right: 20rpx;
		font-size: 26rpx;
		color: #999;
	}

	.related .item .text {
		width: 125rpx;
	}

	.related .picker {
		color: #666;
	}

	.related .picker::after {
		content: "\e6c2";
	}

	/* 结算清单 */
	.settlement {
		padding: 0 20rpx;
		margin: 20rpx 20rpx 0;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.settlement .item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
		font-size: 26rpx;
		color: #333;
	}

	.settlement .symbol {
		font-size: 80%;
	}

	.settlement .danger {
		color: #cf4444;
	}

	.gap {
		height: 20rpx;
	}

	.toolbar {
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		height: 120rpx;
		padding: 0 40rpx;
		border-top: 1rpx solid #eaeaea;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.toolbar .amount {
		font-size: 40rpx;
		color: #cf4444;
	}

	.toolbar .amount .symbol,
	.toolbar .amount .decimal {
		font-size: 75%;
	}

	.toolbar .button {
		width: 220rpx;
		text-align: center;
		line-height: 72rpx;
		font-size: 26rpx;
		color: #fff;
		border-radius: 72rpx;
		background-color: #7dd6c3;
	}
</style>